<template>
  <div class="editprod">
    <h1>商品修改</h1>
    <div class="xiu" v-for="item in products" :key="item.id"
    >
       <img :src="require('@/assets/' + item.imgURL)" alt="">
        <ul>
            <li>名称：<input type="text" v-model="item.title"></li>
            <li>热度：<input type="number" v-model="item.hot"></li>
            <li>畅销：<input type="number" v-model="item.sale"></li>
            <li>流量：<input type="number" v-model="item.visits"></li>
            <li>
              上架状态：
              <input type="checkbox" v-model="item.grounding">
              {{ item.grounding ? '上架' : '下架' }}
            </li>
        </ul>
        <button @click="cancelEdit(item)">取消</button>
        <button @click="saveEdit(item)">修改</button>
    </div>
  </div>
</template>

<script>
import imgData from '@/assets/index.js';

export default {
  data() {
    return {
      // 创建数据副本保持响应式
      products: JSON.parse(JSON.stringify(imgData.ImgList)),
      // 存储原始数据用于取消操作
      originalData: JSON.parse(JSON.stringify(imgData.ImgList))
    }
  },
  methods: {
    cancelEdit(item) {
      const original = this.originalData.find(i => i.id === item.id);
      Object.assign(item, original);
    },
    saveEdit(item) {

      console.log('修改已保存（模拟）', item);

      this.originalData = JSON.parse(JSON.stringify(this.products));
      alert('修改已保存！');
    }
  }
}
</script>
<style scoped>
.editprod{
    width: 100%;
    height: calc(100vh - 100px );
    overflow-y: auto;
}
h1{
    text-align: center;
}
.editprod .xiu{
    width: 45%;
    height: 250px;
    border: 1px solid black;
    padding: 5px;
    margin: 5px auto;
    
}
.editprod .xiu img{
    width: 100px;
    height: 100px;
}

</style>